/*
* 资产盘点计划中的盘点表
* */
import React, {Component} from "react";
import {observer, inject} from "mobx-react";
import {withRouter} from "react-router-dom";
import {ListViewPage} from "weaver-mobile-page";
import {Tools, SearchBar} from "weaver-mobile";
import {getRouteParams, getUrlParams} from "../../util";

const getLabel = Tools.getLabel;
const checkOptions = [
    {
        title: getLabel(384644, "待盘点"),
        index: 1
    }, {
        title: getLabel(385411, "已盘点"),
        index: 2
    }, {
        title: getLabel(1398, "盘盈"),
        index: 3
    }, {
        title: getLabel(1397, "盘亏"),
        index: 4
    },
];
@inject("inventoryDetailStore")
@withRouter
@observer
export default class InventoryDetail extends Component {
    componentWillMount() {
        const {inventoryDetailStore} = this.props;
        const {from} = getRouteParams(this.props);
        inventoryDetailStore.whereFrom(from);
    }

    componentDidMount() {
        this.Init()
    }

    Init = () => {
        const {inventoryDetailStore: {init, from}, history} = this.props;
        const {inventoryId} = getRouteParams(this.props);
        const {newPage} = getUrlParams(this.props.location.search);
        if (newPage === "1") {
            init(inventoryId, newPage);
            history.replace("/inventoryDetail/" + from + "/" + inventoryId);//此处用来强制刷新状态，用来和回退的路由区分
        } else {
            init(inventoryId);
        }
    };

    render() {
        const {
            history,
            inventoryDetailStore: {
                searchValue, searchValue2, detailList, from, chooseIndex,
                onSearch, changeSearchValue, chooseState, scanInfo
            }
        } = this.props;

        return (
            <div>
                <SearchBar
                    className="search-select"
                    placeholder="Search"
                    showExtraButton
                    value={from !== "inventoried" ? searchValue : searchValue2}
                    onChange={(val) => changeSearchValue(val)}
                    onSubmit={onSearch}
                    onClear={() => {
                        changeSearchValue();
                        onSearch();
                    }}
                    extraButton={[
                        {
                            key: "scan",
                            show: <i className='cpt-tool-scan icon-cpt icon-tubiao38'
                                     onClick={(e) => scanInfo(e, history)}/>
                        },
                    ]}
                />
                {from !== "inventoried" ?
                    <div className='cpt-tool-box'>
                        <div>
                            {checkOptions.map((opt, index) => {
                                return (<button key={index} onClick={() => chooseState(opt)}
                                                className={opt.index === chooseIndex ? "cpt-btn-checked" : "cpt-btn-check"}>
                                    {opt.title}</button>)
                            })}
                        </div>
                    </div> : null
                }
                <ListViewPage.Normal
                    rowKey="cptid"
                    store={detailList}
                    onRowClick={(item) => {
                        let viewAttr = "2";
                        if (from === "inventoried") {
                            viewAttr = "1";
                        }
                        if (item.delid === "" || item.delid === undefined) {
                            return false;
                        }
                        history.push("/inventoryForm/" + item.id + "/" + item.cptid + "/" + viewAttr)
                    }}
                />
            </div>
        )
    }
}
